<!DOCTYPE html>
<html>
<head>
<script>
function log(s)
{
    document.getElementById('console')
        .appendChild(document.createElement('div'))
        .appendChild(document.createTextNode(s));
}

function onDragStart(e)
{
    if (e.target.id == 'textInput')
        log('PASS');
    else
        log('FAIL: target element was ' + e.target);
}

function runTest()
{
    document.getElementById('draggableElement').addEventListener('dragstart', onDragStart);
    if (!window.testRunner)
        return;
    testRunner.dumpAsText();

    var textInput = document.getElementById('textInput');
    textInput.focus();
    textInput.select();
    var startX = textInput.offsetLeft + textInput.offsetWidth / 2;
    var startY = textInput.offsetTop + textInput.offsetHeight / 2;
    eventSender.mouseMoveTo(startX, startY);
    eventSender.mouseDown();
    eventSender.leapForward(200);
    eventSender.mouseMoveTo(startX + 100, startY + 100);
    eventSender.mouseUp();
}
</script>
</head>
<body onload="runTest()">
<p>Simple test that dragging selected text in an input box nested in a draggable element works.
<div id="draggableElement" draggable="true">
Draggable div wrapping a text input box:
<input id="textInput" type="text" value="Select and drag me"></input>
</div>
<div id="console"></div>
</body>
</html>
